<template>
  <view>
    <view>
      <view style="background-color: #ffe868;height: 200px;width: 100vw;border-radius: 20px;background-image: url(http://127.0.0.1:3000/image/doller.jpg);position: relative;">
        <view>
          <text style="color:#ffe868;line-height: 200px;margin-left: 20px;">积分余额：{{ user.doller }}</text>
          <img style="width: 100px;height: 100px;position: absolute;right: 10px;bottom: 20px;" src="http://127.0.0.1:3000/image/doller-bg.jpg" alt="">
        </view>
      </view>
      <view style="background-color: #fcb95e;height:100vh">
        <view style="height: 80px;line-height: 80px;padding-left: 10px;margin-top: -20px;"> 
          <text style="color: #ffe868">请选择充值积分额度(2积分等于1人民币)</text>
        </view>
        <view>
          <u-grid :border="true" col="3" style="margin-top: 20px;" >
            <u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex" @click="click(listItem)">
              <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" :size="22"></u-icon>
              <text class="grid-text">{{listItem.title}}</text>
            </u-grid-item>
          </u-grid>
          <u-toast ref="uToast" />
          <u-modal :show="show" @confirm="confirm" @cancel="cancel" :showCancelButton="true" :title="title" :content='content'></u-modal>
        </view>
      </view>
    </view>
  </view>

</template>

<script>
import { baseUrl } from '@/config';
  export default {
      data() {
          return {
            num:0,
            titl:'',
            tit:'',
              id:'',
              user:[],
              list: [{
                  name: 'rmb-circle',
                  title: '10积分',
                  tit:'￥5'
                  },
                  {
                  name: 'rmb-circle',
                  title: '20积分',
                  tit:'￥10'
                  },
                  {
                  name: 'rmb-circle',
                  title: '40积分',
                  tit:'￥20'
                  },
                  {
                  name: 'rmb-circle-fill',
                  title: '100积分',
                  tit:'￥50'
                  },
                  {
                  name: 'rmb-circle-fill',
                  title: '200积分',
                  tit:'￥100'
                  },
                  {
                  name: 'rmb-circle-fill',
                  title: '400积分',
                  tit:'￥200'
                  },
              ],
              show:false,
			        title:'确认充值？',
			        content:``
          }
      },
      onShow(){
        this.id =  uni.getStorageSync('user').data[0].id
        // this.id =  uni.getStorageSync('user').date.id 
        this.getUser()
      },
      methods: {
        confirm() {
          uni.showToast({
            title: '支付成功',
            duration: 1000,
          });
          this.show = false
          var str = this.titl
          var reg2 = new RegExp("积分"); // 不加'g'，仅删除字符串里第一个"a"
          var num = str.replace(reg2,"");
          this.num = parseInt(num) 
          this.user.doller = parseInt(this.user.doller)
          this.user.doller = this.user.doller + this.num
					uni.request({
          url:baseUrl+"/v1/user/userUpdate",
          method: 'POST',
          header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
 					data: {
            id:this.id,
 						doller:this.user.doller
 					},
          success:(res)=>{
            console.log(res);
          }
 				})
				

		    },
        cancel(){
          this.show = false
          console.log("取消");
        },
        getUser(){
            uni.request({
              url: baseUrl+'/v1/user/idSearch', 
              data:{
                id:this.id
              },
              success: (res) => {
                this.user = res.data.data[0]
              }
                      });
          },
          click(listItem) {
              this.titl = listItem.title,
              this.tit = listItem.tit
              this.content = `充值${this.titl},需支付${this.tit}`
              this.show = true
          }
      }
  }
</script>

<style lang="scss">
  .grid-text {
      font-size: 14px;
      color: #909399;
      padding: 10rpx 0 20rpx 0rpx;
      /* #ifndef APP-PLUS */
      box-sizing: border-box;
      /* #endif */
  }
</style>